<!--
 * @Author: gaotang
 * @Date: 2024年12月27日
 * @Email: qq23745038@126.com
 * @LastEditors: gaotang
 * @LastEditTime: 2024-12-27 15:35:39
-->
<template>
  <div class="contents" @click.stop="otherclick">
    <div class="mapwrap">
      <!-- 园区活跃度 不支持下钻-->
      <!-- <ItemWrap v-if="showData0" :style="{ left: offsetX, top: offsetY }" style="height: 305px; width: 520px"
        class="dialog" title="园区活跃度排名" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showData0 = false">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <ACenterTopLeftData />
      </ItemWrap> -->
      <!-- 进出车次变化趋势  -->
      <ItemWrap v-if="showData1" :style="{ left: offsetX, top: offsetY }" style="height: 680px; width: 700px"
        class="dialog" title="大集物流港进出车次" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showData1 = false">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <div style="display: flex; justify-content: space-between">
          <div class="tanDiv" style="width: 50%">
            <div class="tanTitle"><span>车辆品牌分布</span></div>
            <ACenterTopCenterData2 />
          </div>
          <div class="tanDiv" style="width: 50%">
            <div class="tanTitle"><span>进出车型分布</span></div>
            <ACenterTopCenterData1 />
          </div>
        </div>
        <div class="tanDiv" style="width: 100%; margin-top: -40px">
          <div class="tanTitle"><span>车辆进出时间段分布</span></div>
          <ACenterTopCenterData0 />
        </div>
      </ItemWrap>

      <ItemWrap v-if="showData2" :style="{ left: offsetX, top: offsetY }" style="height: 680px; width: 450px"
        class="dialog" title="大集物流港货量规模" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showData2 = false">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <div class="tanDiv">
          <div class="tanTitle"><span>园区发货品类构成</span></div>
          <ACenterTopRightData0 />
        </div>
        <div class="tanDiv" style="margin-top: -20px">
          <div class="tanTitle"><span>园区线路货量分布</span></div>
          <ACenterTopRightData1 />
        </div>
      </ItemWrap>

      <ItemWrap v-if="showData3" :style="{ left: offsetX, top: offsetY }" style="height: 640px; width: 450px"
        class="dialog" title="大集物流港客户发货量" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showData3 = false">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <div class="tanDiv">
          <div class="tanTitle"><span>朝阳商贸发货品类占比</span></div>
          <ACenterBottomLeftData0 />
        </div>
        <div class="tanDiv" style="margin-top: -20px">
          <div class="tanTitle"><span>朝阳商贸园区发货排名</span></div>
          <ACenterBottomLeftData1 />
        </div>
      </ItemWrap>

      <ItemWrap v-if="showData4" :style="{ left: offsetX, top: offsetY }" style="height: 655px; width: 450px"
        class="dialog" title="大集物流港专线发货货量" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showData4 = false">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <div class="tanDiv">
          <div class="tanTitle"><span>燕文物流发货量趋势</span></div>
          <ACenterBottomCenterData0 />
        </div>
        <div class="tanDiv" style="margin-top: -30px">
          <div class="tanTitle"><span>燕文物流线路货量构成</span></div>
          <ACenterBottomCenterData1 />
        </div>
      </ItemWrap>

      <ItemWrap v-if="showData5" :style="{ left: offsetX, top: offsetY }" style="height: 620px; width: 450px"
        class="dialog" title="大集物流港线路数量" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showData5 = false">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <div class="tanDiv">
          <div class="tanTitle"><span>园区专线经营线路数量排名</span></div>
          <ACenterBottomRightData0 />
        </div>
        <div class="tanDiv" style="margin-top: -30px">
          <div class="tanTitle"><span>10月园区运营线路对比</span></div>
          <ACenterBottomRightData1 />
        </div>
      </ItemWrap>

      <!-- 发货品类分布 -->
      <ItemWrap v-if="showData11" :style="{ left: offsetX, top: offsetY }" style="height: 335px; width: 450px"
        class="dialog" title="五金 线路流向分布" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showData11 = false">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <ALeftLeftTopCenterData />
      </ItemWrap>

      <!-- 常发线路 -->
      <ItemWrap v-if="showData12" :style="{ left: offsetX, top: offsetY }" style="height: 620px; width: 450px"
        class="dialog" title="兴隆玩具常发专线" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showData12 = false">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <div class="tanDiv">
          <div class="tanTitle"><span>燕文物流发货客户构成</span></div>
          <ALeftLeftTopRightData0 @chartClick="chartClick12_2" />
        </div>
        <div class="tanDiv" style="margin-top: -30px">
          <div class="tanTitle"><span>兴隆玩具常发专线</span></div>
          <ALeftLeftTopRightData1 />
        </div>
      </ItemWrap>

      <!-- 货主发货线路排名 -->
      <ItemWrap v-if="showData13" :style="{ left: offsetX, top: offsetY }" style="height: 680px; width: 700px"
        class="dialog" title="临沂-北京货主发货量占比" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showData13 = false">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <div style="display: flex; justify-content: space-between">
          <div class="tanDiv" style="width: 50%">
            <div class="tanTitle"><span>临沂-北京货主发货量占比</span></div>
            <ALeftLeftBottomLeftData0 />
          </div>
          <div class="tanDiv" style="width: 50%">
            <div class="tanTitle"><span>临沂-北京货物品类分布</span></div>
            <ALeftLeftBottomLeftData2 />
          </div>
        </div>
        <div class="tanDiv" style="margin-top: -20px">
          <div class="tanTitle"><span>临沂-北京货主发货平均价格</span></div>
          <ALeftLeftBottomLeftData1 />
        </div>
      </ItemWrap>

      <!-- 发货价格趋势 -->
      <ItemWrap v-if="showData14" :style="{ left: offsetX, top: offsetY }" style="height: 600px; width: 500px"
        class="dialog" title="朝阳商贸发货价格" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showData14 = false">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <div class="tanDiv">
          <div class="tanTitle"><span>朝阳商贸线路发货价格</span></div>
          <ALeftLeftBottomRightData0 />
        </div>
        <div class="tanDiv" style="margin-top: 10px">
          <div class="tanTitle"><span>朝阳商贸货物品类发货价格</span></div>
          <ALeftLeftBottomRightData1 />
        </div>
      </ItemWrap>

      <!-- 客户发货占比 -->
      <ItemWrap v-if="showData21" :style="{ left: offsetX, top: offsetY }" style="height: 600px; width: 500px"
        class="dialog" title="朝阳商贸发货趋势" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showData21 = false">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <div class="tanDiv">
          <div class="tanTitle"><span>朝阳商贸发货趋势</span></div>
          <ALeftRightTopRightData0 />
        </div>
        <div class="tanDiv" style="margin-top: 10px">
          <div class="tanTitle"><span>朝阳商贸常用车辆排名</span></div>
          <ALeftLeftTopRightData0 />
        </div>
      </ItemWrap>

      <!-- 常跑线路 -->
      <ItemWrap v-if="showData22" :style="{ left: offsetX, top: offsetY }" style="height: 600px; width: 700px"
        class="dialog" title="临沂-广州发车趋势" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showData22 = false">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <div class="tanDiv">
          <div class="tanTitle"><span>临沂-广州发车次数</span></div>
          <ALeftRightBottomData0 />
        </div>
        <div class="tanDiv" style="margin-top: 20px">
          <div class="tanTitle"><span>广州-临沂发车次数</span></div>
          <ALeftRightBottomData1 />
        </div>
      </ItemWrap>

      <!-- 客户发货占比 -->
      <ItemWrap v-if="showData31" :style="{ left: offsetX, top: offsetY }" style="height: 640px; width: 700px"
        class="dialog" title="朝阳商贸发货专线占比" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showData31 = false">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <div class="tanDiv" style="width: 100%">
          <div class="tanTitle"><span>朝阳商贸发货专线占比</span></div>
          <ARightLeftTopCenterData0 />
        </div>
        <div style="
            display: flex;
            justify-content: space-between;
            margin-top: -20px;
          ">
          <div class="tanDiv" style="width: 50%">
            <div class="tanTitle"><span>朝阳商贸发货品类占比</span></div>
            <ARightLeftTopCenterData1 />
          </div>
          <div class="tanDiv" style="width: 50%">
            <div class="tanTitle"><span>朝阳商贸常发线路</span></div>
            <ARightLeftTopCenterData2 />
          </div>
        </div>
      </ItemWrap>

      <!-- 线路发货量排名 -->
      <ItemWrap v-if="showData32" :style="{ left: offsetX, top: offsetY }" style="height: 640px; width: 700px"
        class="dialog" title="燕文物流线路货量" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showData32 = false">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <div class="tanDiv" style="width: 100%">
          <div class="tanTitle"><span>临沂-上海专线发货量排名</span></div>
          <ARightLeftTopRightData0 />
        </div>
        <div style="
            display: flex;
            justify-content: space-between;
            margin-top: -20px;
          ">
          <div class="tanDiv" style="width: 50%">
            <div class="tanTitle"><span>临沂-上海货主发货量排名</span></div>
            <ARightLeftTopRightData1 />
          </div>
          <div class="tanDiv" style="width: 50%">
            <div class="tanTitle"><span>临沂-上海发货品类构成</span></div>
            <ARightLeftTopRightData2 />
          </div>
        </div>
      </ItemWrap>

      <!-- 收货价格趋势 支持2级下钻 -->
      <ItemWrap v-if="showData33" :style="{ left: offsetX, top: offsetY }" style="height: 305px; width: 450px"
        class="dialog" title="线路收货价格对比" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showData33 = false">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <ARightLeftBottomRightData0 @chartClick="chartClick33_2" />
      </ItemWrap>
      <ItemWrap v-if="showData33_2" :style="{ left: offsetX, top: offsetY }" style="height: 305px; width: 450px"
        class="dialog" title="临沂-上海专线收货价格对比" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showData33_2 = false">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <ARightLeftBottomRightData1 />
      </ItemWrap>

      <!-- 线路时效变化趋势 -->
      <ItemWrap v-if="showData34" :style="{ left: offsetX, top: offsetY }" style="height: 305px; width: 450px"
        class="dialog" title="临沂-北京专线时效排名" @click.native.stop="isMapClick = false">
        <div class="close" @click.stop="showData34 = false">
          <i class="el-input__icon el-icon-close"></i>
        </div>
        <ARightLeftBottomLeftData />
      </ItemWrap>
    </div>
    <div class="content_left" @click="changePage('left')"></div>
    <!-- <div class="content_center"> -->
    <transition-group name="fade" mode="out-in" tag="div" class="content_center">
      <ItemWrap1 v-for="(item, idx) in list" :key="item.id" :class="[item.className]" :title="item.title"
        :style="item.myStyle" :listid="Number(item.id)" @click="changePage(idx)">
        <component :is="item.name" :type="item.type" @chartClick="chartClick"></component>
      </ItemWrap1>
    </transition-group>
    <!-- </div> -->
    <div class="content_right" @click="changePage('right')"></div>
  </div>
</template>

<script>
import { getScreenPoint } from "@/utils/";
import { componentList } from "./component-list.js";
import MapData from "./modal/map-data.vue";
import ACenterTopLeftData from "./modal/acenter-top-left-data.vue";
import ACenterTopCenterData0 from "./modal/acenter-top-center-data0.vue";
import ACenterTopCenterData1 from "./modal/acenter-top-center-data1.vue";
import ACenterTopCenterData2 from "./modal/acenter-top-center-data2.vue";

import ACenterTopRightData0 from "./modal/acenter-top-right-data0.vue";
import ACenterTopRightData1 from "./modal/acenter-top-right-data1.vue";

import ACenterBottomLeftData0 from "./modal/acenter-bottom-left-data0.vue";
import ACenterBottomLeftData1 from "./modal/acenter-bottom-left-data1.vue";
import ACenterBottomCenterData0 from "./modal/acenter-bottom-center-data0.vue";
import ACenterBottomCenterData1 from "./modal/acenter-bottom-center-data1.vue";

import ACenterBottomRightData0 from "./modal/acenter-bottom-right-data0.vue";
import ACenterBottomRightData1 from "./modal/acenter-bottom-right-data1.vue";

import ALeftLeftTopLeftData0 from "./modal/aleftleft-top-left-data0.vue";

import ALeftLeftTopCenterData from "./modal/aleftleft-top-center-data.vue";

import ALeftLeftTopRightData0 from "./modal/aleftleft-top-right-data0.vue";
import ALeftLeftTopRightData1 from "./modal/aleftleft-top-right-data1.vue";

import ALeftLeftBottomLeftData0 from "./modal/aleftleft-bottom-left-data0.vue";
import ALeftLeftBottomLeftData1 from "./modal/aleftleft-bottom-left-data1.vue";
import ALeftLeftBottomLeftData2 from "./modal/aleftleft-bottom-left-data2.vue";

import ALeftLeftBottomRightData0 from "./modal/aleftleft-bottom-right-data0.vue";
import ALeftLeftBottomRightData1 from "./modal/aleftleft-bottom-right-data1.vue";

import ALeftRightTopRightData0 from "./modal/aleftright-top-right-data0.vue";
import ALeftRightTopRightData1 from "./modal/aleftright-top-right-data1.vue";

import ALeftRightBottomData0 from "./modal/aleftright-bottom-data0.vue";
import ALeftRightBottomData1 from "./modal/aleftright-bottom-data1.vue";

import ARightLeftTopCenterData0 from "./modal/arightleft-top-center-data0.vue";
import ARightLeftTopCenterData1 from "./modal/arightleft-top-center-data1.vue";
import ARightLeftTopCenterData2 from "./modal/arightleft-top-center-data2.vue";

import ARightLeftTopRightData0 from "./modal/arightleft-top-right-data0.vue";
import ARightLeftTopRightData1 from "./modal/arightleft-top-right-data1.vue";
import ARightLeftTopRightData2 from "./modal/arightleft-top-right-data2.vue";

import ARightLeftBottomRightData0 from "./modal/arightleft-bottom-right-data0.vue";
import ARightLeftBottomRightData1 from "./modal/arightleft-bottom-right-data1.vue";

import ARightLeftBottomLeftData from "./modal/arightleft-bottom-left-data.vue";

export default {
  name: "AvatorMain",
  components: {
    MapData,
    ACenterTopLeftData,
    ACenterTopCenterData0,
    ACenterTopCenterData1,
    ACenterTopCenterData2,
    ACenterTopRightData0,
    ACenterTopRightData1,
    ACenterBottomLeftData0,
    ACenterBottomLeftData1,
    ACenterBottomCenterData0,
    ACenterBottomCenterData1,
    ACenterBottomRightData0,
    ACenterBottomRightData1,

    ALeftLeftTopLeftData0,
    ALeftLeftTopCenterData,

    ALeftLeftTopRightData0,
    ALeftLeftTopRightData1,

    ALeftLeftBottomLeftData0,
    ALeftLeftBottomLeftData1,
    ALeftLeftBottomLeftData2,

    ALeftLeftBottomRightData0,
    ALeftLeftBottomRightData1,

    ALeftRightTopRightData0,
    ALeftRightTopRightData1,
    ALeftRightBottomData0,
    ALeftRightBottomData1,

    ARightLeftTopCenterData0,
    ARightLeftTopCenterData1,
    ARightLeftTopCenterData2,

    ARightLeftTopRightData0,
    ARightLeftTopRightData1,
    ARightLeftTopRightData2,

    ARightLeftBottomRightData0,
    ARightLeftBottomRightData1,

    ARightLeftBottomLeftData,
  },
  data() {
    return {
      offsetX: 0,
      offsetX1: 0,
      offsetX11: 0,
      offsetX2: 0,
      offsetY: 0,
      showData0: false,
      showData1: false,
      showData2: false,
      showData3: false,
      showData4: false,
      showData5: false,

      showData10: false,
      showData11: false,
      showData12: false,
      showData12_2: false,
      showData13: false,
      showData14: false,
      isMapClick: false,

      showData20: false,
      showData21: false,
      showData22: false,

      showData30: false,
      showData31: false,
      showData32: false,
      showData33_2: false,
      showData33: false,
      showData34: false,
      list: [...componentList],
    };
  },
  mounted() {
    this.list = [...componentList];
  },
  methods: {
    chartClick(params) {
      console.log("点击的数据index:", params);
      const { x, x1, x11, x2, y } = getScreenPoint(params.options.event.event);
      this.isMapClick = true;
      // const { name, event } = params;
      // this.offsetX = event.offsetX + 860 + 'px';
      // this.offsetY = event.offsetY + 500 + 'px';
      this.offsetX = x;
      this.offsetX1 = x1;
      this.offsetX11 = x11;
      this.offsetX2 = x2;
      this.offsetY = y;

      if (params.name === "ACenterTopLeft") {
        // this.showData0 = true;
        this.closeAll("showData0");
      } else if (params.name === "ACenterTopCenter") {
        this.showData1 = true;
        this.closeAll("showData0");
      } else if (params.name === "ACenterTopRight") {
        // this.showData2 = true;
        this.closeAll("showData2");
      } else if (params.name === "ACenterBottomLeft") {
        // this.showData3 = true;
        this.closeAll("showData3");
      } else if (params.name === "ACenterBottomCenter") {
        // this.showData4 = true;
        this.closeAll("showData4");
      } else if (params.name === "ACenterBottomRight") {
        // this.showData5 = true;
        this.closeAll("showData5");
      } else if (params.name === "ALeftLeftTopLeft") {
        // this.showData10 = true;
        this.closeAll("showData10");
      } else if (params.name === "ALeftLeftTopCenter") {
        // this.showData11 = true;
        this.closeAll("showData11");
      } else if (params.name === "ALeftLeftTopRight") {
        // this.showData12 = true;
        this.closeAll("showData12");
      } else if (params.name === "ALeftLeftBottomLeft") {
        // this.showData13 = true;
        this.closeAll("showData13");
      } else if (params.name === "ALeftLeftBottomRight") {
        // this.showData14 = true;
        this.closeAll("showData14");
      } else if (params.name === "ALeftRightTopLeft") {
        // this.showData20 = true;
        this.closeAll("showData20");
      } else if (params.name === "ALeftRightTopCenter") {
        // this.showData21 = true;
        this.closeAll("showData21");
      } else if (params.name === "ALeftRightTopRight") {
        // this.showData22 = true;
        this.closeAll("showData22");
      } else if (params.name === "ARightLeftTopLeft") {
        // this.showData30 = true;
        this.closeAll("showData30");
      } else if (params.name === "ARightLeftTopCenter") {
        // this.showData31 = true;
        this.closeAll("showData31");
      } else if (params.name === "ARightLeftTopRight") {
        // this.showData32 = true;
        this.closeAll("showData32");
      } else if (params.name === "ARightLeftBottomLeft") {
        // this.showData33 = true;
        this.closeAll("showData33");
      } else if (params.name === "ARightLeftBottomRight") {
        // this.showData34 = true;
        this.closeAll("showData34");
      } else {
      }
    },
    chartClick12_2(params) {
      // this.showData12_2 = true;
      this.closeAll(["showData12", "showData12_2"]);
    },
    chartClick33_2(params) {
      // this.showData33_2 = true;
      this.closeAll(["showData33", "showData33_2"]);
    },
    closeAll(actionNames) {
      actionNames = Array.isArray(actionNames) ? actionNames : actionNames ? [actionNames] : [];
      const closeNames = ["showData0", "showData1", "showData2", "showData3", "showData4", "showData5", "showData10", "showData11", "showData12", "showData12_2", "showData13", "showData14", "showData20", "showData21", "showData22", "showData30", "showData31", "showData32", "showData32_2", "showData33", "showData34"];
      closeNames.forEach((item) => {
        this[item] = actionNames.includes(item);
      });
      // this.showData0 = false;
      // this.showData1 = false;
      // this.showData2 = false;
      // this.showData3 = false;
      // this.showData4 = false;
      // this.showData5 = false;

      // this.showData10 = false;
      // this.showData11 = false;
      // this.showData12 = false;
      // this.showData12_2 = false;
      // this.showData13 = false;
      // this.showData14 = false;

      // this.showData20 = false;
      // this.showData21 = false;
      // this.showData22 = false;

      // this.showData30 = false;
      // this.showData31 = false;
      // this.showData32 = false;
      // this.showData33_2 = false;
      // this.showData33 = false;
      // this.showData34 = false;
    },
    otherclick() {
      if (!this.isMapClick) {
        this.closeAll();
      }
      this.isMapClick = false;
    },
    changePage(type) {
      if (type === "left") {
        const shift = this.list.shift();
        this.list.push(shift);
        this.updateProps();
      } else if (type === "right") {
        const pop = this.list.pop();
        this.list.unshift(pop);
        this.updateProps();
      } else if (type != 2) {
        const curr = this.list.splice(type, 1);

        this.list.splice(2, 0, curr[0]);
        this.updateProps();
      }
    },
    updateProps() {
      [
        {
          className: "l-item",
          type: "LeftLeft",
          myStyle: {
            width: "450px",
            height: "780px",
          },
        },
        {
          className: "content_left-item",
          type: "LeftRight",
          myStyle: {
            width: "900px",
            marginLeft: "30px",
            height: "780px",
          },
        },
        {
          className: "content_center-item",
          type: "Center",
          myStyle: {
            width: "1300px",
            height: "780px",
          },
        },
        {
          className: "content_right-item",
          type: "RightLeft",
          myStyle: {
            width: "900px",
            marginRight: "30px",
            height: "780px",
          },
        },
        {
          className: "r-item",
          type: "RightRight",
          myStyle: {
            width: "450px",
            height: "780px",
          },
        },
      ].forEach(
        (item, idx) => (this.list[idx] = { ...this.list[idx], ...item })
      );
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~animate.css/animate.css";

.contents {
  .mapwrap {
    // margin-top: -20px;
    // margin-bottom: -50px;
    // height: 580px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    // position: relative;
    top: 0;
    z-index: 900;
    pointer-events: none;

    .close {
      position: absolute;
      right: 15px;
      top: 10px;
      z-index: 999;
      cursor: pointer;
      pointer-events: auto;
    }

    .dialog {
      width: 400px;
      height: 200px;
      position: absolute;
      z-index: 999;
    }

    .tanDiv {
      width: 100%;
      margin: 5px;

      .tanTitle {
        width: calc(100% - 20px);
        height: 24px;
        line-height: 24px;
        background: url("../../assets/img/launch/car/th9.png") no-repeat left center;

        span {
          display: flex;
          margin-left: 38px;
          line-height: 24px;
          color: #d8f0ff;
        }
      }
    }
  }

  .content_left,
  .content_right {
    pointer-events: auto;
    width: 110px;
    display: flex;
    cursor: pointer;
    background-size: 65px 65px;
    animation: scaleAnimation 1.5s ease-in-out infinite;

    &:hover {
      animation-play-state: paused;
    }
  }

  .content_left {
    background: url("../../assets/img/launch/avator/left.png") no-repeat 10px center;
  }

  .content_right {
    background: url("../../assets/img/launch/avator/right.png") no-repeat 30px center;
  }

  // 中间
  .content_center {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .content_center-item {
    // transition: all 0.5s ease-in-out;
  }

  .l-item {
    transform: perspective(1300px) rotateY(24deg); // 设置3D旋转角度
    transform-origin: right center; // 设置旋转中心为元素左边
    transition: transform 0.5s ease-in-out; // 添加过渡效果
  }

  .r-item {
    transform: perspective(1300px) rotateY(-24deg); // 设置3D旋转角度
    transform-origin: left center; // 设置旋转中心为元素左边
    transition: transform 0.5s ease-in-out; // 添加过渡效果
  }
}

// 定义缩放动画
@keyframes scaleAnimation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  // transform: translateX(-100%, 0); // 从右往左
  // transform: translateX(100%, 0); // 从右往左
  // transform: translate(0, 100%) scale(0.1); // 从右往左
  // transform: scale(0.1);
  transform: translate(0, 100%);
  transition: all 2s;
}
</style>
